<template>
  <view class="logistics">
    <view class="header acea-row row-between row-top" v-for="cart in cartInfo" :key="cart.id">
      <view class="pictrue">
        <image :src="cart.productInfo.image" />
      </view>
      <view class="text acea-row row-between">
        <view class="name line2">{{ cart.productInfo.store_name }}</view>
        <view class="money">
          <view>￥{{ cart.truePrice }}</view>
          <view>x{{ cart.cart_num }}</view>
        </view>
      </view>
    </view>
    <view class="logisticsCon" style="margin-bottom: 5px">
      <view class="company acea-row row-between-wrapper">
        <view class="picTxt acea-row row-between-wrapper">
          <view class="iconfont icon-wuliu"></view>
          <view class="text">
            <view>
              <text class="name line1">物流公司：</text>
              {{ model.deliverySn }}
            </view>
            <view class="express line1">
              <text class="name">快递单号：</text>
              {{ model.deliveryId }}
            </view>
          </view>
        </view>
        <view
          class="copy acea-row row-center-wrapper copy-data"
          @click="copyClipboard(model.deliveryId)"
        >复制单号</view>
      </view>
      <view class="item" v-for="(express, expressListIndex) in expressList" :key="expressListIndex">
        <view class="circular" :class="expressListIndex === 0 ? 'on' : ''"></view>
        <view class="text">
          <view :class="expressListIndex === 0 ? 'font-color-red' : ''">{{ express.status }}</view>
          <view class="data">{{ express.time }}</view>
        </view>
      </view>
    </view>

    <!-- 物流进度条 -->
    <view class="div-bg bg-white" style="font-size:12px; background:#fff;">
      <!--物流跟踪-->
      <view style="margin-bottom:5px;">
        <view
          class="bg-white"
          style="width: 92%; margin-left: 4%;margin: auto;padding-left: 15px;padding-right: 15px;padding-top: 10px"
        >
          <view style="font-size: 26rpx;color: #111111; margin: 5px 0">
            物流跟踪
            <!--物流跟踪-->
          </view>
          <view>
            <view class="track-rcol">
              <view class="track-list">
                <view>
                  <view
				  class="track-list-item"
                    v-for="(item,logisticsListindex) in logisticsList"
                    :key="logisticsListindex"
                  >
                    <view class="active" v-if="logisticsListindex===0">
                      <view></view>
                      <i class="node-icon"></i>
                      <text class="txt">{{item.acceptStation}}</text>
                      <text class="time">{{item.acceptTime}}</text>
                    </view>
                    <view
                      v-if="logisticsListindex > 0 && logisticsListindex !== logisticsList.length-1"
                    >
                      <i class="node-icon"></i>
                      <text class="txt">{{item.acceptStation}}</text>
                      <text class="time">{{item.acceptTime}}</text>
                    </view>
                    <view v-if="logisticsListindex === logisticsList.length-1" class="finall">
                      <i class="div-spilander"></i>
                      <i class="node-icon"></i>
                      <text class="txt">{{item.acceptStation}}</text>
                      <text class="time">{{item.acceptTime}}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="no-express" v-if="loaded && !expressList.length">
      <image src="https://qny.yijiumy.com/noExpress.png" />
    </view>
  </view>
</template>
<script>
import { express, orderDetail } from "@/api/order";
import { copyClipboard } from "@/utils";

export default {
  name: "UserLogistics",
  data: function() {
    return {
      model: {},
      cartInfo: [],
      expressList: [],
      loaded: false,
      logisticsList: [
        {
          message: "暂无数据",
          messageDate: ""
        }
      ]
    };
  },
  mounted: function() {
    this.model = this.$yroute.query
    this.getExpressInfo();
  },
  methods: {
    copyClipboard,
    getExpressInfo() {
      let params = {
        orderCode: "",
        shipperCode: this.model.deliverySn,
        logisticCode: this.model.deliveryId
      };
      express(params)
        .then(res => {
			console.log(res)
          this.logisticsList = res.data.traces.reverse();
        })
        .catch(err => {
          uni.showToast({
            title:
              err.msg || err.response.data.msg || err.response.data.message,
            icon: "none",
            duration: 2000
          });
        });
    }
  }
};
</script>

<style scoped lang="less">
.no-express {
  margin: 1.5 * 100rpx 0;
}

.no-express image {
  width: 6 * 100rpx;
  margin: 0 auto;
  display: block;
}

ul view {
  list-style: none;
  font-size: 0.24 * 100rpx;
}

ul {
}

.track-rcol {
}

.track-list {
  position: relative;
}

.track-list > view {
  position: relative;
  padding: 0 0 0.5 * 100rpx 20rpx;
}
.track-list .track-list-item {
  position: relative;
  padding: 0 0 0.5 * 100rpx 20rpx;
  line-height: 0.3 * 100rpx;
  border-left: 1px solid #d9d9d9;
  color: #999;
}

.track-list view.first {
  color: red;
  padding-top: 0;
  width: 100%;
  text-align: left;
  border-left: 1px solid #d9d9d9;
}

.track-list view.node-icon {
  position: absolute;
  left: -6.5px;
  border-radius: 50%;
  width: 0.2 * 100rpx;
  height: 0.2 * 100rpx;
  top: 4px;
  background-color: #b2b2b2;
  padding: 0 !important;
}

.track-list view.active .node-icon {
  background-position: 0 -72px;
  background-color: #ea7c0a;
  width: 0.3 * 100rpx;
  z-index: 2;
  height: 0.3 * 100rpx;
  position: absolute;
  left: -0.19 * 100rpx;
  top: 0;
  border-radius: 50%;
}

.track-list view.time {
  margin-right: 20px;
  position: relative;
  top: 4px;
  display: inline-block;
  vertical-align: middle;
  color: #999;
  width: 100%;
  text-align: left;
}

.track-list view.txt {
  position: relative;
  display: inline-block;
  vertical-align: top;
  color: #999;
  left: 0.2 * 100rpx;
  top: 0.04 * 100rpx;
}

.track-list view.first .time {
  text-align: left;
  width: 94%;
  color: red;
}

.track-list view.first .txt {
  color: red;
  text-align: left;
  width: 94%;
}

.track-list view.finall {
  padding: 0px 0 0.5 * 100rpx 5px;
  line-height: 18px;
  border-color: white;
  border-left: 1px solid #ffffff;
  color: #999;
}

.track-list view.finall .div-spilander {
  width: 1px;
  position: absolute;
  left: -1.5px;
  height: 0.5 * 100rpx;
  background-color: #d9d9d9;
}
</style>
